<template>
    <div>
<van-nav-bar
  title="标题"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
  fixed
/>
<div style="height: 45px;"></div>
<van-search
  v-model="value"
  shape="round"
  background="#4fc08d"
  placeholder="请输入搜索关键词"
  @search="onSearch"
/>
<van-swipe :autoplay="3000" lazy-render>
  <van-swipe-item v-for="image in images" :key="image">
    <img :src="image" style="width: 370px;height: 300px;"/>
  </van-swipe-item>
</van-swipe>
<van-grid >
  <van-grid-item :icon="item.image_src" :text="item.name" v-for="item in catitemsApiData"/>
</van-grid>
<p>秒杀倒计时
<van-count-down :time="time">
  <template #default="timeData">
    <span class="block">{{ timeData.hours }}</span>
    <span class="colon">:</span>
    <span class="block">{{ timeData.minutes }}</span>
    <span class="colon">:</span>
    <span class="block">{{ timeData.seconds }}</span>
  </template>
</van-count-down>
</p>
<div class="dd">
    <div class="aa">
        <van-image
  width="100"
  height="100"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
    </div>
    <div class="aa">
        <van-image
  width="100"
  height="100"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
    </div>
    <div class="aa">
        <van-image
  width="100"
  height="100"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
    </div>
    <div class="aa">
        <van-image
  width="100"
  height="100"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
    </div>
    <div class="aa">
        <van-image
  width="100"
  height="100"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
    </div>
    <div class="aa">
        <van-image
  width="100"
  height="100"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
    </div>
    <div class="aa">
        <van-image
  width="100"
  height="100"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
    </div>
    <div class="aa">
        <van-image
  width="100"
  height="100"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
    </div>
</div>
<div style="height: 45px;"></div>
    </div>
</template>

<script setup>
import router from '@/router';
import { catitemsApi } from '@/api/api';
import { ref } from 'vue';
const images = [
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',
    ];
const catitemsApiData=ref([])
catitemsApi().then(res=>{
    catitemsApiData.value=res.data.message
    console.log(res.data.message);
    
})
    const time = ref(30 * 60 * 60 * 1000);
    const onSearch=()=>{
        router.push('/ss')
    }
</script>

<style scoped>
 .colon {
    display: inline-block;
    margin: 0 4px;
    color: #1989fa;
  }
  .block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #1989fa;
  }
  .aa{
    width: 180px;height: 180px;
    float: left;
  }
</style>